<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>个人信息</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <!--weui.min.css-->
    <link rel="stylesheet" href="/static/index/css/page/base.css"/>
    <link rel="stylesheet" href="/static/index/css/page/font.css"/>
    <link rel="stylesheet" href="/static/index/jquery_weui/css/swiper.min.css"/>
    <link rel="stylesheet" type="text/css" href="/static/index/jquery_weui/lib/weui.min.css">
    <!--jquery-weui.min.css-->
    <link rel="stylesheet" type="text/css" href="/static/index/jquery_weui/css/jquery-weui.min.css">
    <link rel="stylesheet" href="/static/index/css/page/friend.css" />
</head>
<body>
<div class="pageControl personal bg-f5">
    <!--主体-->
    <div class="zhe"></div>
    <div class="main">
        <div class="bg-di"></div>
        <div class="msui_nav msui_navTop">
            <a class="msui_navTop-back" href="javascript:history.back();"><i class="micon-back"></i></a>
            <h1 class="msui_navTop-title">好友</h1>
            <a class="msui_navTop-icon" href="javascript:history.back();">
                <i class="micon-home"></i>
            </a>
        </div>
        <div class="other-nav">
            <a href="1">
                <span class="cl-3333 activeCl">好友</span>
            </a>
            <a href="2">
                <span class="cl-3333">聊天</span>
            </a>
        </div>
        <div class="index-sou">
            <i class="sou"></i>
            <div class="index-sou">
	            <div class="weui-search-bar" id="searchBar">
	                <form class="weui-search-bar__form">
	                    <div class="weui-search-bar__box">
	                        <i class="weui-icon-search"></i>
	                        <input type="search" class="weui-search-bar__input" id="search" placeholder="搜索好友和聊天记录" required="">
	                        <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
	                    </div>
	                    <label class="weui-search-bar__label" id="searchText">
	                        <i class="weui-icon-search"></i>
	                        <span>搜索好友和聊天记录</span>
	                    </label>
	                </form>
	                <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
	            </div>
        	</div>
        </div>
        {if $bool}
        <div class="main1">
            <div data-value="1" class="goodFriends active">
            	<!--好友-->
                {foreach name="friend" item="vo"}
                <div class="friend-list">
                    <a href="t1" class="weui-cell list list1" id="href">
                        <div class="weui-label">
                        	{if $vo.img}
                            <img src="{$vo.img}" alt=""/>
                            {else}
                            <img src="/static/index/img/head.png" alt=""/>
                            {/if}
                        </div>
                        <div class="weui-cell__bd">
                            <span class="cl-3333">{$vo.name}</span>
                        </div>
                        <!--已收藏加星星加class为xx，文字去掉class-->
                        <!--<div class="weui-cell__ft">
                        	<span class="xx"></span>
                        </div>-->
                        <input type="hidden" class='friend_id' value="{$vo.id}" />
                    </a>
                      
              
                    <div class="list-btn">
                        <object>
                        	<a href="t1" class="cl-f stick1">置顶</a>
                            <a href="t1" class="cl-f delete1">删除<input type="hidden" class="friend" value="{$vo.id}" /></a>
                        </object>
                    </div>
                </div>
                {/foreach}
                <!--<div class="friend-list">
                    <a href="t2" class="weui-cell list">
                        <div class="weui-label">
                            <img src="/static/index/img/1.jpg" alt=""/>
                        </div>
                        <div class="weui-cell__bd">
                            <span class="cl-3333">sbuibe</span>
                        </div>
                        <div class="weui-cell__ft">
                            <span class="xx"></span>
                        </div>
                    </a>
                    <div class="list-btn">
                        <object>
                            <a href="t2" class="cl-f stick1">置顶</a>
                            <a href="t2" class="cl-f delete1">删除</a>
                        </object>
                    </div>
                </div>-->
                <!--<div class="friend-list">
                    <a href="t3" class="weui-cell list">
                        <div class="weui-label">
                            <img src="/static/index/img/1.jpg" alt=""/>
                        </div>
                        <div class="weui-cell__bd">
                            <span class="cl-3333">sbuibe</span>
                        </div>
                        <div class="weui-cell__ft">
                            <span>等待验证</span>
                        </div>
                    </a>
                    <div class="list-btn">
                        <object>
                            <a href="t3" class="cl-f stick1">置顶</a>
                            <a href="t3" class="cl-f delete1">删除</a>
                        </object>
                    </div>
                </div>-->
            </div>
            <!--聊天-->
            <div data-value="2" class="chat">
            	{foreach name="chat" item="v"}
                <div class="friend-list">
                    <a href="/index/friend/onlineChat?friend_id={$v.friend_id}" class="weui-cell">
                        <div class="weui-label">
                        	{if $v.img}
                            <img src="{$v.img}" alt=""/>
                            {else}
                            <img src="/static/index/img/head.png" alt=""/>
                            {/if}
                        </div>
                        <div class="weui-cell__bd">
                            <span class="cl-3333">{$v.name}</span>
                            <p class="cl-3333">{$v.content}</p>
                        </div>
                        <!--已收藏加星星加class为xx，文字去掉class-->
                        <div class="weui-cell__ft">
                            <span>{$v.create_time}</span>
                        </div>
                    </a>
                    <div class="list-btn">
                        <object>
                            <a href="d1" class="cl-f stick1">置顶</a>
                            <a href="d1" class="cl-f screen">屏蔽</a>
                        </object>
                    </div>
                </div>
                {/foreach}
            
        </div>
        {/if}
    </div>
    <div class="screen-main">
        <div class="bg-di"></div>
        <div class="msui_nav msui_navTop">
            <a class="msui_navTop-back" href="javascript:history.back();"><i class="micon-back"></i></a>
            <h1 class="msui_navTop-title">屏蔽聊天</h1>
        </div>
        <p class="f5"></p>
        <p class="friend-title">您确定要屏蔽该好友吗？屏蔽</p>
        <p class="text-center bg-fff">后将不再接受该好友给您发的信息</p>
        <div class="friend-flex">
            <a href="" id="screen-qu" class="f-brn bg-ff7 cl-f">取消</a>
            <a href="" id="screen-que" class="f-brn bg-b3 cl-f">确定</a>
        </div>
    </div>
    <div class="delete-main">
        <div class="bg-di"></div>
        <div class="msui_nav msui_navTop">
            <a class="msui_navTop-back" href="javascript:history.back();"><i class="micon-back"></i></a>
            <h1 class="msui_navTop-title">删除好友</h1>
        </div>
        <p class="f5"></p>
        <p class="friend-title">您确定要删除该好友吗？</p>
        <p class="text-center bg-fff">删除后好友列表将不再显示</p>
        <div class="friend-flex">
            <a id="delete-qu" href="" class="f-brn bg-ff7 cl-f">取消</a>
            <a href="" id="delete-que" class="f-brn bg-b3 cl-f">确定</a>
        </div>
    </div>
</div>
<!-- jquery-2.1.4 -->
<script type="text/javascript" src="/static/index/jquery_weui/lib/jquery-2.1.4.js"></script>
<!-- jquery-weui.min.js -->
<script type="text/javascript" src="/static/index/jquery_weui/js/jquery-weui.min.js"></script>
<script src="/static/index/jquery_weui/js/swiper.min.js"></script>
<script>
	/*搜索*/
	$("#search").change(function(){
		var like = $("#search").val();
		window.location.href="/index/friend/search?like="+like;
	});
    $(".index-input").focus(function(){
        $(this).prev().css("display","none")
    })
    $(".main").on("click", 'a.stick1',function (e) {
        e.preventDefault();
        var that=$(this);
        var tt=that.parent().parent().parent().parent();
        var list=that.parent().parent().parent().clone(true);
        that.parent().parent().parent().remove();
        tt.prepend(list);
        list.children('div.list-btn').removeClass('active');
    })
    $(".goodFriends").on("click", 'a.delete1',function (e) {
        var friend = $(this).children("input").val();
        e.preventDefault();
        $('.delete-main').addClass('active')
        list=$(this).parent().parent().parent();
        $("#delete-que").click(function(e){
            e.preventDefault();
            $(".delete-main").removeClass('active');
            list.remove();
            $.ajax({
                type:'post',
                url:'/index/friend/deletefriend',
                data:{friend:friend},
                success:function (data){
                    if(data == "1"){
                        alert('删除好友成功!')
                    }else if(data == "-1"){
                        alert('删除好友失败！');
                    }
                }
            });
        })
    })
    $("#delete-qu").click(function(e){
        e.preventDefault();
        $(".delete-main").removeClass('active');
    })
    $("#screen-qu").click(function(e){
        e.preventDefault();
        $(".screen-main").removeClass('active');
    })
    $(".chat").on("click", 'a.screen',function (e) {
        e.preventDefault();
        $('.screen-main').addClass('active');
        list=$(this).parent().parent().parent();
        $("#screen-que").click(function(e){
            e.preventDefault();
            $(".screen-main").removeClass('active');
            list.remove();
        })
    })
    $(".other-nav").on('click','a',function(e){
        e.preventDefault();
        var list=$(this).attr('href');
        $(this).children().addClass('activeCl');
        $(this).siblings().children().removeClass('activeCl');
        $(`[data-value='${list}']`).addClass('active')
            .siblings().removeClass('active')
    })
    $(".main").on("click",'a.list',function(e){
        e.preventDefault();
        $(this).addClass("active").siblings().removeClass('active');
    })
    function longPress(){
        timeOutEvent = 0;
    }
    $(".zhe").click(function () {
        $(".list-btn").removeClass('active');
    })
    var startTime=0;
    var endTime=0;
    $(".list").on({
        touchstart: function(e){
        	startTime=e.timeStamp;
            var that=this;
            timeOutEvent = setTimeout(function(){
                timeOutEvent = 0;
                $(that).next('div.list-btn').addClass('active');
            },500);
            e.preventDefault();
            $(".list-btn").removeClass('active');
            $(".list").removeClass('active');
            $(this).addClass("active");
            
        },
        touchmove: function(e){
            clearTimeout(timeOutEvent);
            timeOutEvent = 0;
        },
        touchend: function(e){
        	friend_id = $(this).find('input').val();

        	endTime=e.timeStamp;
        	time=endTime-startTime
        	console.log(time);
        	if(time<500){
//      		点击跳转
				window.location.href="/index/friend/onlineChat?friend_id="+friend_id
        	}
            clearTimeout(timeOutEvent)
            if(timeOutEvent!=0){
				
            }
            
            return false;
        }
    })
</script>
</body>
</html>

